<template>
  <header>
    <div class="slogan">
      <hgroup>
        <h3>foods</h3>
        <h2>吃货 &nbsp; 生活</h2>
        <h3>致敬长不胖的你</h3>
      </hgroup>
    </div>
  </header>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
header {
  position: relative;
  background: url(../assets/img/foods/foods_banner.jpg) no-repeat center center;
  /* background-attachment: fixed; */
  height: 660px;
  position: relative;
  color: #fff;
  overflow: hidden;

  .slogan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 440px;
    height: 260px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    /* font-family: "hanbiao"; */
    text-shadow: 0 0 3px #000;
    text-align: center;

    &::before,
    &::after {
      content: "";
      display: block;
      height: 100%;
      width: 40px;
      border: 1px solid #fff;
    }
    &::before {
      border-right: none;
    }
    &::after {
      border-left: none;
    }
    h2 {
      position: relative;
      font-size: 70px;
    }
    h2::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      background-color: #fff;
    }
    h3 {
      font-weight: 100;
      &:nth-of-type(1) {
        text-transform: uppercase;
        font-size: 24px;
        letter-spacing: 2px;
      }
      &:nth-of-type(2) {
        letter-spacing: 5px;
      }
    }
  }
}
</style>